{% load i18n %}
<style>
    @media (min-width: 1440px) {
        .container {
        width: 1287px!important;
        }
    }
    .userinfo_icon {
        width: 100%;
        height: 120px;
        background-color: #fbfbfb;
        padding: 10px 0 0px 0px;
        color: #777;
        font-size: 12px;
        line-height: 1;
        text-align: center;
        border-bottom: 1px solid #e6e6e6;
    }

    .left_sider {
        width:100%;
        background-color:#fff;
        padding: 20px 0px 20px 0px;
        text-align:left;
    }
    .left_sider ul {
    }
    .left_sider li {
                list-style:none;
        height:41px;
        line-height:41px;
        font-size:14px;
        color:#777;
        cursor:pointer
    }

    .left_sider li a {
        color:#777;
    }

    .left_sider li i {
        margin: 0px 10px 0px 20px;
        font-size:16px;
    }
    .left_sider .active a {
        color:#1b7cef;
    }

    .left_sider  li {
        border-right: 4px solid #fbfbfb;
        border-bottom: 1px solid #fbfbfb;
    }
    .left_sider  li.active {
        color:#1b7cef;
        background-color:#ecf4fe;
        border-right: 4px solid #0e75ee;
    }
</style>

<div class="col-md-2 ">
    <div class="panel panel-pm">
        <div class="userinfo_icon">
            <img src="/static/images/icon/btc.svg" width="48px" height="48px"/>
            <h6><b>{{user.email}}</b></h6>
            <h6>ID:{{user.id}} </h6>
        </div>
        <ul class="left_sider">
            <li id="id_userinfo_balances"><i class="fa fa-bank"></i><a class="" href="{%url 'userinfo_balances' %}">{%trans '资金余额' %}</a></li>
            <li id="finance"><i class="fa fa-history"></i><a class="" href="{%url 'userinfo_finance' %}">{%trans '财务记录' %}</a></li>
            <li id="userinfo"><i class="fa fa-user"></i><a class="" href="{%url 'userinfo' %}">{%trans '个人信息' %}</a></li>
            <li id="safe"><i class="fa fa-shield"></i><a class="" href="{%url 'userinfo_safe' %}">{%trans '安全中心' %}</a></li>
            <!--
            <li id="apikey" ><i class="fa fa-shield"></i><a href="/users/apikey/">{%trans 'api keys' %}</a></li>
            -->
            <li><i class="fa fa-question-circle"></i><a class="" href="#">{%trans '帮助中心' %}</a></li>
        </ul>
    </div>
</div> <!--end col -->
